<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {userInfoService, userInfoUpdateService} from '@/api/teacher.js'
import useUserInfoStore from '@/stores/userInfo.js'
import {ElMessage} from 'element-plus'
import {useTokenStore} from '@/stores/token.js'
import avatar from '@/assets/default.png'

const tokenStore = useTokenStore();

const router = useRouter()
const userInfoStore = useUserInfoStore()

const rules = {
  nickname: [
    {required: true, message: '请输入用户昵称', trigger: 'blur'},
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    {required: true, message: '请输入用户邮箱', trigger: 'blur'},
    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
  ],
  phoneNumber: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
  ]
}

const userInfo = ref({...userInfoStore.info})


const getUserInfo = async () => {
  try {
    const result = await userInfoService()
    userInfoStore.setInfo(result.data)
  } catch (error) {
    console.error('Failed to fetch user info:', error)
    ElMessage.error('获取用户信息失败')
  }
}
getUserInfo()

const isEdit = ref(false);
const isInfo = ref(true);

const updateUserInfo = async () => {
  let result = await userInfoUpdateService(userInfo.value);
  ElMessage.success(result.msg ? result.msg : '修改成功');
  userInfoStore.setInfo(userInfo.value)
  isInfo.value=true;
  isEdit.value=false;
}

const uploadSuccess = (result) => {
  userInfo.value.coverImg = result.data;
  console.log(result.data);
}


const uploadRef = ref()

</script>

<template>
  <div v-if="isInfo" class="userInfo-container">
    <el-card class="info-container">
      <template #header>
        <el-upload :auto-upload="true" :headers="{'Authorization':tokenStore.token}" :on-success="uploadSuccess"
                   :show-file-list="false"
                   action="/api/upload"
                   class="avatar-uploader"
                   name="file"
        >
          <img v-if="userInfo.coverImg" :src="userInfo.coverImg" class="avatar"/>
          <el-avatar v-else :size="100" :src=" avatar" class="avatar-custom"></el-avatar>
        </el-upload>
      </template>

      <el-row>
        <el-col :span="12">
          <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
            <el-form-item label="教师ID" prop="id">
              <el-input v-model="userInfo.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="教师姓名">
              <el-input v-model="userInfo.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="职务" prop="position">
              <el-input v-model="userInfo.position" disabled></el-input>
            </el-form-item>
            <el-form-item label="教师邮箱" prop="email">
              <el-input v-model="userInfo.email" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input v-model="userInfo.phoneNumber" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="button-container">
        <el-button type="primary" @click="isEdit=true,isInfo=false">编辑个人信息</el-button>
      </div>
    </el-card>
  </div>

  <div v-else-if="isEdit" class="userInfo-container">
    <el-card class="info-container">
      <template #header>
        <el-avatar :size="100" :src="userInfoStore.info.coverImg ? userInfoStore.info.coverImg : avatar"
                   class="avatar-custom"></el-avatar>
      </template>
      <el-row>
        <el-col :span="12">
          <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="教师职务" prop="position">
              <el-input v-model="userInfo.position"></el-input>
            </el-form-item>
            <el-form-item label="教师邮箱" prop="email">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input v-model="userInfo.phoneNumber"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="button-container">
        <el-button type="primary" @click="updateUserInfo">提交修改</el-button>
        <el-button type="primary" @click="isInfo=true,isEdit=false">取消编辑</el-button>
      </div>

    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.userInfo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .avatar-name-container {
    display: flex;
    align-items: center;
  }

  .user-name {
    font-size: 20px;
    margin-top: 10px;
  }

  .user-signature {
    margin-top: 10px;
    color: #666;
  }

  .button-container {
    margin-top: 20px;
    display: flex;
    width: 100%;
    gap: 20px;
    justify-content: space-between;

    .el-button {
      width: 50%;
    }
  }

  .user-actions {
    margin-top: 20px;

    .el-button {
      margin-right: 10px;
    }
  }
}

.info-container {
  min-height: 100%;
  box-sizing: border-box;
  width: 60%;

}

.avatar-uploader {
  :deep(.el-upload) {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
      border-radius: 50%; /* 将头像设置为圆形 */
      object-fit: cover; /* 确保头像完全填充容器 */
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 50%; /* 将上传区域设置为圆形 */
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

</style>
